<template>
<article class="page page-pigpen-cipher container">
	<h4 class="text-center">猪圈密码</h4>
  <fieldset class="panel-1">
    <legend>密文字符</legend>
    <table class="table table-bordered">
      <tbody>
        <tr v-for="(row, rowIndex) in pigpenData" :key="`row_${rowIndex}`">
          <td v-for="(col, colIndex) in row" :key="`td_${rowIndex}_${colIndex}`"
          @click="clickItemHandler(col)">{{ col }}</td>
        </tr>
      </tbody>
    </table>
  </fieldset>
  <fieldset class="panel-2">
    <legend>明文</legend>
    <div class="row-flex" align="center">
      <div class="row-flex-main"><input class="form-control" type="text" v-model="plaintext" readonly /></div>
      <div class="row-flex-suffix" title="清空" @click="plaintext=''">
        <i class="fa fa-trash-o"></i>
      </div>
    </div>
  </fieldset>
</article>
</template>

<script>
export default {
	name: 'pigpen-cipher',
	data () {
		return {
			plaintext: '',
      pigpenData: [
        ['a','b','c','d','e','f','g','h','i'],
        ['j','k','l','m','n','o','p','q','r'],
        ['s','t','u','v','w','x','y','z',':'],
        ['<','>','?','@',';','=','[','\\',']'],
        ['^','_','`','{','}','|','~','%','+']
      ]
		}
	},
	methods: {
		clickItemHandler (val) {
			this.plaintext += val
		}
	}
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-pigpen-cipher {
	display: flex;
	flex-direction: column;
  .panel-1 {
    .table {
      font-family: pigpen-regular;
      font-size: 3vw;
      text-align: center;
      td {
        cursor: pointer;
      }
    }
  }
  .panel-2 {
    margin-top: 1em;
    height: 0;
    flex-grow: 1;
    .fa-trash-o {
      font-size: 24px;
      margin-left: .25em;
      cursor: pointer;
    }
  }
}
</style>
